import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:love_app/common/su.dart';
import 'package:love_app/providers/share_provider.dart';
import 'package:love_app/routes/application.dart';
import 'package:love_app/routes/routes.dart';
import 'package:provider/provider.dart';

// 我的页面上部分内容
class MineTopBox extends StatefulWidget {
  @override
  _MineTopBoxState createState() => _MineTopBoxState();
}

class _MineTopBoxState extends State<MineTopBox> {
  ShareProvider _shareProvider;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _shareProvider = Provider.of<ShareProvider>(context, listen: false);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: Su().w(715),
      height: Su().h(412),
      padding: EdgeInsets.only(
        top: Su().h(27),
      ),
      margin: EdgeInsets.only(
        top: Su().h(23),
      ),
      decoration: BoxDecoration(
          color: Colors.white, borderRadius: BorderRadius.circular(Su().w(20))),
      child: Column(
        children: <Widget>[
          _headerItem(),
          _centerItem(),
          _vipItem(),
        ],
      ),
    );
  }

  // 头部内容
  Widget _headerItem() {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        _weHeaderImage(),
        _weInfoAndName(),
        _walletImage(),
      ],
    );
  }

  // 两个人的头像
  Widget _weHeaderImage() {
    return Container(
      width: Su().w(165),
      height: Su().h(124),
      child: Stack(
        children: <Widget>[
          _headerImageLeft(),
          _headerImageRight(),
        ],
      ),
    );
  }

  //左边的头像
  Widget _headerImageLeft() {
    return Positioned(
      left: Su().w(24),
      child: ClipOval(
        child: Image.network(
          _shareProvider.headerImage,
          width: Su().w(97),
          height: Su().w(97),
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  //右边的头像
  Widget _headerImageRight() {
    String image = _shareProvider.loverInfo?.headimg;
    return Positioned(
      left: Su().w(94),
      top: Su().h(52),
      child: Container(
        width: Su().w(53),
        height: Su().w(53),
        decoration: BoxDecoration(
          color: Colors.red,
          border: Border.all(
            width: Su().w(5),
            color: Colors.white,
          ),
          borderRadius: BorderRadius.circular(90),
        ),
        child: ClipOval(
          child: Image.network(
            image == null
                ? _shareProvider.headerImage
                : _shareProvider.loverInfo.headimg,
            width: Su().w(53),
            height: Su().w(53),
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }

  // 钱包
  Widget _walletImage() {
    return Container(
      width: Su().w(164),
      height: Su().h(124),
      child: Column(
        children: <Widget>[
          _walletImageChild(),
          Text(
            "我的钱包",
            style: Su().textStyle(Color.fromRGBO(38, 38, 38, 1), 28),
          )
        ],
      ),
    );
  }

  // 我们的信息
  Widget _weInfoAndName() {
    return Expanded(
      flex: 1,
      child: InkWell(
        onTap: (){
          Application.router.navigateTo(context, "/weInfo", transition: TransitionType.inFromRight);
        },
        child: Container(
          padding: EdgeInsets.only(
            top: Su().h(27),
          ),
          child: _weInfoAndNameChild(),
        ),
      ),
    );
  }

  // 我们的信息内容
  Widget _weInfoAndNameChild() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          _shareProvider.nickname,
          style: Su().textStyle(Color.fromRGBO(38, 38, 38, 1), 28),
        ),
        Text(
          "我们的信息 >",
          style: Su().textStyle(_shareProvider.textColor, 24),
        ),
      ],
    );
  }

  // 钱包child
  Widget _walletImageChild() {
    return InkWell(
      onTap: () {
        Application.router.navigateTo(context, Routes.myWallet);
      },
      child: Image.asset(
        _getImagePath("wallet"),
        width: Su().w(65),
        height: Su().w(65),
      ),
    );
  }

  // 中间的功能区
  Widget _centerItem() {
    return Expanded(
      child: Container(
        padding: EdgeInsets.only(
          top: Su().h(20),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            _centerItemEveryItem("限时夺宝", _getImagePath("xianshi"), ""),
            _centerItemEveryItem("情侣家园", _getImagePath("qinglv"), ""),
            _centerItemEveryItem("登录有礼", _getImagePath("denglu"), ""),
          ],
        ),
      ),
    );
  }

  // 每一个widget
  Widget _centerItemEveryItem(String name, String imagePath, String route) {
    return InkWell(
      onTap: () {},
      child: Column(
        children: <Widget>[
          Image.asset(
            imagePath,
            width: Su().w(80),
            height: Su().w(80),
          ),
          Text(
            name,
            style: Su().textStyle(Color.fromRGBO(38, 38, 38, 1), 30),
          ),
        ],
      ),
    );
  }

  String _getImagePath(String imagePath) {
    return "images/mine_page/" + imagePath + ".png";
  }

  // vip栏目
  Widget _vipItem() {
    return Container(
      height: Su().h(69),
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage(
            _getImagePath("vip"),
          ),
          fit: BoxFit.fill,
        ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          _vipLeftText(),
          _vipRightText(),
        ],
      ),
    );
  }

  // vip左边的文字
  Widget _vipLeftText() {
    return Container(
      padding: EdgeInsets.only(
        left: Su().w(22),
      ),
      child: Text.rich(
        TextSpan(
          text: "VIP",
          style: Su().textStyle(Color.fromRGBO(141, 111, 72, 1), 30),
          children: [
            TextSpan(
              text: "会员",
              style: Su().textStyle(Color.fromRGBO(141, 111, 72, 1), 22),
            ),
          ],
        ),
      ),
    );
  }

  // vip右边的文字
  Widget _vipRightText() {
    return Container(
      padding: EdgeInsets.only(
        right: Su().w(22),
      ),
      child: Text(
        "开通会员 >",
        style: Su().textStyle(Colors.white, 22),
      ),
    );
  }
}
